﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Adaptive Cards Example</title>

	<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.js"></script>

	<style type="text/css">
		#exampleDiv {
			width: 250px;
			border: solid 1px black;
		}
	</style>

	<script type="text/javascript">
		function renderCard() {

			// author a card
			// in practice you'll probably get this from a service
			// see http://adaptivecards.io/samples/ for inspiration
			var card = {
				"type": "AdaptiveCard",
				"version": "1.0",
				"body": [{
						"type": "Image",
						"url": "https://adaptivecards.io/content/adaptive-card-50.png"
					},
					{
						"type": "TextBlock",
						"text": "Hello **Adaptive Cards!**"
					}
				],
				"actions": [{
						"type": "Action.OpenUrl",
						"title": "Learn more",
						"url": "https://adaptivecards.io"
					},
					{
						"type": "Action.OpenUrl",
						"title": "GitHub",
						"url": "https://github.com/Microsoft/AdaptiveCards"
					}
				]
			};

			// Create an AdaptiveCard instance
			var adaptiveCard = new AdaptiveCards.AdaptiveCard();

			// Set its hostConfig property unless you want to use the default Host Config
			// Host Config defines the style and behavior of a card
			adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
				fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
				// More host config options
				// You can find example configs here: https://github.com/microsoft/AdaptiveCards/tree/main/samples/HostConfig
			});

			// Set the adaptive card's event handlers. onExecuteAction is invoked
			// whenever an action is clicked in the card
			adaptiveCard.onExecuteAction = function (action) {
				alert("Ow!");
			}

			// Parse the card payload
			adaptiveCard.parse(card);

			// Render the card to an HTML element:
			var renderedCard = adaptiveCard.render();

			// And finally insert it in the page:
			document.getElementById('exampleDiv').appendChild(renderedCard);
		}
	</script>

</head>

<body onload="renderCard()">
	<h1>Adaptive Cards Example</h1>

	<p>This example requires a build of the Adaptive Cards library.</p>

	<h3>To run:</h3>
	<code>
		<pre>$ npm install</pre>
		<pre>$ npm run build</pre>
		<pre>Refresh this page</pre>
	</code>

	<h3>A card will render below</h3>

	<div id="exampleDiv"></div>

</body>

</html>
